<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>component-lifecycle</title>
	<script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
    <style>
		#flash {
			position: absolute;
			top: 200px;
			left: 200px;
			background:red;
			padding: 10px;
			color: #fff;
		}
    </style>
</head>
<body>
	<h1>component-lifecycle</h1>
	<div id="example"></div>
	<script type="text/babel">
		var MyTextLine = React.createClass({
			getInitialState: function() {
				return {opacity: 1.0, 
					left: 200,
					top: 100
				};
			},
			componentWillMount: function() {
				// console.log("will mount");
			},
			componentDidMount: function() {
				// console.log("did mount");
				this.timer = setInterval(function() {
					var opacity = this.state.opacity;
					opacity -= 0.05;
					if(opacity < 0.1) {
						opacity = 1.0;
					}
					this.setState({opacity: opacity});

					var left = this.state.left;
					var v = Math.random() * 10;
					if(v >= 5) {
						left += v;
					}else{
						left -= v;
					}
					if(left < 0) left = 100;
					if(left > 1000) left = 1000;
					this.setState({left:left});


					var top = this.state.top;
					v = Math.random() * 10
					if(v >= 5) {
						top += v;
					}else{
						top -= v;
					}
					if(top > 500) top -= v;
					if(top < 0) top = 200;
					this.setState({top:top});
				}.bind(this), 100);
			},
			componentWillUpdate: function(nextProps, nextState) {
				// console.log("will update");
			},
			componentDidUpdate: function(prevProps, prevState) {
				// console.log("did update");
			},
			componentWillUnmount: function() {
				// console.log("will unmount");
			},
			render: function() {
				return (<p id="flash" style={{opacity:this.state.opacity, left:this.state.left,top: this.state.top}}> hello {this.props.name}</p>);
			}
		});

		ReactDOM.render(
			<MyTextLine name="Bisu" />,
			document.getElementById("example")
		)
	</script>
</body>
</html>